<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<style type="text/css">
	*{margin:0px;padding:0px;list-style:none;}
	#all{width:910px;height:1000px;margin:10px auto;}
	.uls{width:220px;height:1000px;float:left;margin-right:5px;}
	.uls li{width:220px;height:360px;border:solid 1px orange;margin-bottom:5px;}
	.cur{margin-left:140px;}


	</style>
</head>
<body>
		<li id='lis' style='display:none'>
			<img src="./images/04c79b9dde6c803faf3b2ddbadce76f7.jpg" alt="" width='100%' height='310px'><span><a href="">清新小短裙</a></span><br><span class='cur'>¥120</span>
		</li>

	<div id='all'>
		<ul class='uls'>
			
		</ul>
		<ul class='uls'>
			
		</ul>
		<ul class='uls'>
		
		</ul>
		<ul class='uls'>
		
		</ul>
	</div>

	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
	<script type="text/javascript">
	//页码
	var p = 1;

	//每页显示多少条数据
	var num = 20;

	var isLoad = false;

	$.get('pbl.php',{p:p,num:num},function(data){

		if(data != '1'){

			for (var i = 0; i < data.length; i++) {
				
				//克隆
				var into = $('#lis').clone(true);
				//替换标题
				into.find('span').eq(0).html('<a href="">'+data[i].title+'</a>')
				//替换图片
				into.find('img').attr('src',data[i].pic);
				//替换价格
				into.find('span').eq(1).text(data[i].price);

				var index = i % 4;
				//插入
				// into.appendTo('.uls');
				$('.uls').eq(index).append(into);
				//显示数据
				into.show();
			};
			p++;
		}

	},'json')

	//滚动事件
	$(window).scroll(function(){
		//如果正在加载的话 不让你加载  如果没有加载就进行加载
		if(isLoad == true) return false;

		//获取整个文档的高度
		var dh = $(document).height();
		//获取可视区域的高度
		var ch = $(window).height();
		//获取滚动条距离顶部的偏移量
		var th = $(window).scrollTop();

		if(dh-ch-th <= 200)
		{
			isLoad = true;
			$.get('pbl.php',{p:p,num:num},function(data){

				if(data != '1'){

					for (var i = 0; i < data.length; i++) {
						
						//克隆
						var into = $('#lis').clone(true);
						//替换标题
						into.find('span').eq(0).html('<a href="">'+data[i].title+'</a>')
						//替换图片
						into.find('img').attr('src',data[i].pic);
						//替换价格
						into.find('span').eq(1).text(data[i].price);

						var index = i % 4;
						//插入
						// into.appendTo('.uls');
						$('.uls').eq(index).append(into);
						//显示数据
						into.show();
					};
					p++;

					isLoad = false;
				}

			},'json')
		}
	})
	</script>
</body>
</html>